/**
 * zoom module
 */

import React,{Component} from "react";
import zoomProvider from "../../provider/zoomProvider";
import editorSize from "../../../consts/editorSize";
class Zoom extends Component{
    handleOnZoomIn(){
        zoomProvider.zoomIn();
        let param = {
            scale: zoomProvider.scale()
        }
        this.updateRulerPosition(param);
    }
    handleOnZoomOut(){
        zoomProvider.zoomOut();
        let param = {
            scale: zoomProvider.scale()
        }
        this.updateRulerPosition(param);
    }
    handleOnResetZoom(){
        zoomProvider.resetScale();
        let param = {
            scale: zoomProvider.scale()
        }
        this.updateRulerPosition(param);
    }
    updateRulerPosition(param){
        const {fromTemplate,setState} = this.props;
        if (fromTemplate) return false;

        const scale = zoomProvider.scale();

        const left = (editorSize.view.width / 2 * scale - 700) / scale,
        top = (editorSize.view.height / 2 * scale - 700) / scale;
        
        if (scale == 1){
            
        }
        param["rulerLeft"] = left;
        param["rulerTop"] = top;
        setState(param);
    }
    render(){
        var scale = this.props.scale;
        scale = parseInt((scale * 100).toFixed(0));

        return (
            <div className="zoom-tool tool-item">
                <div className="icon_jian" onClick={() => this.handleOnZoomIn()} id='ZoomIn'></div>
                <span className="zoom-value" onClick={() => this.handleOnResetZoom()}>{scale + "%"}</span>
                <div className="icon_jia" onClick={() => this.handleOnZoomOut()} id='ZoomOut'></div>
            </div>
        )
    }
}

module.exports = Zoom;
